﻿@page "/scheduler/custom-views"

@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This demo illustrates how to display n number of days, weeks and months on a single view.</p>
</SampleDescription>
<ActionDescription>
    <p> In this demo, the <code>Interval</code> property has been defined with different values on each view such as 3 on day view, 2 on week view, and 4 on month view. so that it will be displayed as 3 days, 2 weeks, and 4 months on the respective views. This property is not applicable on agenda and month agenda views.</p>
</ActionDescription>

<div class="control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.FifaEventsData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleViews>
                <ScheduleView Option="View.Day" DisplayName="3 Days" Interval="3"></ScheduleView>
                <ScheduleView Option="View.Week" DisplayName="2 Weeks" Interval="2" IsSelected="true"></ScheduleView>
                <ScheduleView MaxEventsPerRow="1" Option="View.Month" DisplayName="4 Months" Interval="4"></ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>


@code{
    private DateTime CurrentDate = new DateTime(2020, 1, 22);
    public List<ScheduleData.FifaEventsData> DataSource = new ScheduleData().GetFifaEventsData();
}